<template>
  <view>
    <view class="nav-bar"></view>
    <view class="container">
      <uni-search-bar
        placeholder="请输入就诊人姓名"
        radius="100"
        @confirm="onSearchConfirm"
        @cancel="onSearchCancel"
        @clear="onSearchCancel"></uni-search-bar>
      <view class="tab-view">
        <uni-grid
          :column="4"
          :square="false"
          :showBorder="false"
          :highlight="false">
          <uni-grid-item v-for="(item, index) in tabs">
            <view class="grid-item">
              <view
                @click="tabClick(item, index)"
                :class="current === index ? 'grid-item-inner-selected' : ''"
                class="grid-item-inner">
                {{ item }}
              </view>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>

    <template v-if="orderStatus === '用户评价'">
      <view class="card-view evaluate-card-view" v-for="(item, index) in list">
        <view class="top-row">
          <view class="left">
            <uni-icons type="contact" size="50"></uni-icons>
            <!-- <image class="img" src="../../static/logo.png"></image> -->
          </view>
          <view class="right">
            <view class="name-and-date">
              <view class="name">{{ item.visitor }}</view>
              <view class="expand"></view>
              <view class="date"></view>
            </view>
            <view class="evaluate">
              <view class="name">服务评价：</view>
              <uni-rate
                size="18"
                readonly
                v-model="item.comprehensiveServices"></uni-rate>
            </view>
          </view>
        </view>
        <view class="service-item">
          <view class="name">
            服务项目：
            <span v-for="itemInfo in item.itemInfos">
              {{ itemInfo.serviceItem }}/
            </span>
          </view>
          <view class="value">服务项目</view>
        </view>
        <view class="evaluate-text">
          {{ item.evaluate }}
        </view>
      </view>
    </template>
    <template v-else>
      <view
        class="card-view"
        v-for="(item, index) in list"
        @click="navToDetails(item)">
        <view class="title-row">
          <view class="title">编号：{{ item.orderNum }}</view>
          <view class="status">{{ item.status }}</view>
        </view>
        <view class="proj-row" v-for="itemInfo in item.itemInfos">
          <image :src="itemInfo.serviceItemImg"></image>
          <view class="name">{{ itemInfo.serviceItem }}</view>
        </view>
        <view class="name-value-row">
          <view class="name">就诊人</view>
          <view class="value">{{ item.visitor }}</view>
        </view>
        <view class="name-value-row">
          <view class="name">派发服务时间</view>
          <view class="value">{{ item.toDoorTime || "" }}</view>
        </view>
        <view class="div-line"></view>
        <view class="status-row">
          <view class="date">{{ item.setOutTime || "" }}</view>
          <view class="btn" v-if="item.status === '待出发'">立即出发</view>
          <view class="btn" v-if="item.status === '待服务'">开始服务</view>
          <view class="btn" v-if="item.status === '服务中'">结束服务</view>
        </view>
      </view>
    </template>

    <uni-load-more :status="status"></uni-load-more>
  </view>
</template>

<script>
import * as loginUtils from "utils/loginUtils.js";
import PageInfo from "../../utils/pageutils";
import * as orderInfo from "../../common/api/orderInfo.js";
export default {
  data() {
    return {
      tabs: [
        "全部",
        "待出发",
        "待服务",
        "服务中",
        "待评价",
        "用户评价",
        "已完成",
        "退款/售后",
        "已取消",
      ],
      current: 0,
      form: {
        visitor: "",
      },
      pageInfo: new PageInfo(),
      list: [],
      status: "more",
      orderStatus: "全部",
    };
  },
  onLoad() {
    this.refresh();
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },
  onShow() {
    loginUtils.checkLogin();
    this.refresh();
  },
  methods: {
    tabClick(item, index) {
      this.current = index;
      this.orderStatus = item;
      this.refresh();
    },
    navToDetails(item) {
      uni.navigateTo({
        url:
          "/pages/orderDetails/orderDetails?uid=" +
          item.uid +
          "&wxOpenid=" +
          item.wxOpenid,
      });
      // uni.navigateTo({
      // 	url: '/pages/nurse-profile/index'
      // })
    },
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    getList() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      const data = JSON.parse(dataJson) || {};
      const param = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        dispatchNursesUid: data.nurseUid,
        ...this.form,
      };
      if (this.orderStatus === "全部") {
        param.statusList = [
          "全部",
          "待出发",
          "待服务",
          "服务中",
          "待评价",
          "用户评价",
          "已完成",
          "退款/售后",
          "已取消",
        ];
      } else if (this.orderStatus === "退款/售后") {
        param.statusList = ["待退款", "退款中", "已退款", "已拒绝"];
      } else if (this.orderStatus === "待评价") {
        param.statusList = ["已完成"];
        param.isEvaluate = "否";
      } else if (this.orderStatus === "用户评价") {
        param.statusList = ["已完成"];
        param.isEvaluate = "是";
      } else {
        param.status = this.orderStatus;
      }
      orderInfo
        .queryByPage(param)
        .then((result) => {
          const list = result.data.data.rows || [];
          const total = result.data.data.total;
          this.list = [...this.list, ...list];
          this.pageInfo.total = total;
          this.pageInfo.loadedTotal = this.list.length;
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = "more";
            } else {
              this.status = "noMore";
            }
            uni.stopPullDownRefresh();
          }, 200);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onSearchConfirm(e) {
      console.log(e);
      this.form.visitor = e.value;
      this.list = [];
      this.getList();
    },
    onSearchCancel(e) {
      this.form.visitor = "";
      this.list = [];
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 554rpx;
  background: linear-gradient(to bottom, #2eb0d9, #f9f9f9);
}

.container {
  display: flex;
  flex-direction: column;
  margin-top: -520rpx;
}

.tab-view {
  margin-left: 20rpx;
  margin-right: 20rpx;

  .grid-item {
    width: 100%;
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;

    .grid-item-inner {
      width: 100%;
      height: 66rpx;
      background: white;
      border-radius: 33rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: rgba(35, 35, 35, 0.8);
      background: rgba(255, 255, 255, 0.5);
    }

    .grid-item-inner-selected {
      background: white;
      color: #2eb0d9;
    }
  }
}

.card-view {
  margin-left: 20rpx;
  margin-right: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;

  .title-row {
    display: flex;
    align-items: center;

    .title {
      flex: 1;
      color: #232323;
      font-size: 30rpx;
      font-weight: bold;
    }

    .status {
      color: #f5803d;
      font-size: 30rpx;
    }
  }

  .proj-row {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    image {
      width: 136rpx;
      height: 136rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 20rpx;
    }
  }

  .name-value-row {
    display: flex;
    align-items: center;
    margin-top: 40rpx;

    .name {
      width: 156rpx;
      font-size: 26rpx;
      color: rgba(35, 35, 35, 0.7);
    }

    .value {
      color: #232323;
      font-size: 26rpx;
      margin-left: 20rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .status-row {
    display: flex;
    align-items: center;
    margin-top: 30rpx;

    .date {
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
      flex: 1;
    }

    .btn {
      border: solid 2rpx #2eb0d9;
      color: #2eb0d9;
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 60rpx;
    }
  }
}

.evaluate-card-view {
  .top-row {
    display: flex;
    width: 100%;

    .left {
      height: 100rpx;
      width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      margin-left: 10rpx;
      width: 100%;

      .name-and-date {
        display: flex;
        width: 100%;

        .name {
        }

        .expand {
          flex: 1;
        }

        .date {
        }
      }

      .evaluate {
        display: flex;
        align-items: center;

        .name {
        }
      }
    }
  }

  .service-item {
    display: flex;
    align-items: center;
    color: #aaaaaa;

    .name {
    }

    .value {
    }
  }

  .evaluate-text {
    margin-top: 20rpx;
  }
}
</style>
